<template>
    <div
        :style="{
            left: start && start.x + 'px',
            top: start && start.y + 'px',
            width: width + 'px',
            height: height + 'px'
        }"
        class="area"
    ></div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
    name: "subgroup",
    props: {
        start: {
            type: Object
        },
        width: {
            type: Number,
            default: 0
        },
        height: {
            type: Number,
            default: 0
        }
    },
    computed: {
        ...mapState({
            areaData: (state) => state.areaData
        }),
        areaDataLen() {
            return this.areaData.components.length;
        }
    }
};
</script>

<style lang="scss" scoped>
.area {
    border: 2px solid rgb(0, 122, 255);
    position: absolute;
    &.isShow {
        background-color: rgba(0, 122, 255, 0.1);
    }
}
</style>
